<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	response.setHeader("X-Frame-Options","SAMEORIGIN");
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="../../public/public.jsp"/>
<body>
	<!-- 菜单按钮、搜索框 -->
		<div id="menu_tb" style="height:auto;margin-top: 20px;">
		    <table cellspacing="0" cellpadding="0" style="border-bottom: 1px solid #cccccc"  width="100%">
		        <tr>
		        	<td style="height:50px;padding-left:20px">
		        	 	登录账户:<input id="userName" class="easyui-textbox" data-options="width:100"/>
		        	 	用户名称:<input id="showName" class="easyui-textbox" data-options="width:100"/>
		        	 	<a href="javascript:void(0)" onclick="init()" class="easyui-linkbutton" 
		        	 	 data-options="width:100,height:40,iconCls:'icon-search'">搜&nbsp;&nbsp;&nbsp;&nbsp;索</a>
		            	<a href="javascript:void(0)" onclick="chongzhi()" class="easyui-linkbutton" 
		            	data-options="width:100,height:40,iconCls:'icon-remove'">重&nbsp;&nbsp;&nbsp;&nbsp;置</a>
		            </td>
		     </tr>
		     </table>
		     
		     <table style="height: auto;">       
		     	<tr>
		            <td>
		                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-mini-refresh" plain="true" onclick="refresh()">刷新列表</a>
		            </td>
		            <td>
		                <div class="datagrid-btn-separator"></div>
		            </td>
		            <td>
		                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-mini-edit" plain="true" onclick="addUser()">新增用户</a>
		            </td>
		            <td>
		                <div class="datagrid-btn-separator"></div>
		            </td>
		            <td>
		            	<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-man" plain="true" onclick="roleSelected()">分配权限</a>
		            </td>
		            <td>
		                <div class="datagrid-btn-separator"></div>
		            </td>
		        </tr>
		    </table>
		</div>	
		<!-- end -->
	<table id="dg" style="width:100%;height: 320px;" data-options="
				url:'<%=basePath %>user/queryUser',
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10">
		<thead>
			<tr>
				<th field="userName" width="15%" align="center">登录账户</th>
				<th field="userPass" width="18%" align="center">登录密码</th>
				<th field="showName" width="15%" align="center">用户名称</th>
				<th field="roleId" width="5%" align="center">权限ID</th>
				<th field="roleName" width="20%" align="center" formatter="roleNameformatter">权限名称</th>
				<th field="createTimeStr" width="15%" align="center">创建时间</th>
				<th field="isDel" width="10%" align="center" formatter="isdelformatter" >启用/禁用</th>
			</tr>
		</thead>
	</table>
	
	<!-- 添加窗口表单 -->
		<div id="add" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-edit'" style="width:300px;height:370px;padding:10px;"> 
			<form id="addForm" method="post">
		  		<table align="center" style="margin-top:20px">
		    		<tr style="height: 30px">
		    			<td>登录账户:</td>
		    			<td><input name="userName"  id="userNameAdd" class="easyui-textbox" data-options="width:150,required:true"/></td>
		    		</tr>
		    		<tr style="height: 30px">
		    			<td>登录密码:</td>
		    			<td><input name="userPass" id="userPassAdd" type="password" class="easyui-textbox" data-options="width:150,required:true"/></td>
		    		</tr>
		    		<tr style="height: 30px">
		    			<td>用户名称:</td>
		    			<td><input name="showName" id="showNameAdd" class="easyui-textbox" data-options="width:150,required:true"/></td>
		    		</tr>
		   		</table>
			</form>
		</div>
	<!--添加窗口表单 end -->
	<!-- 分配权限窗口 start-->
		<div id="role" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-edit'" style="width:300px;height:370px;padding:10px;">
		  	<table align="center" style="margin-top:20px">
		    	<tr style="height: 30px">
		    		<td>登录账户:<label id="userNameRole"></label></td>
		    	</tr>
		    	<tr style="height: 30px">
		    		<td>用户名称:<label id="showNameRole"></label></td>
		    	</tr>
		    	<tr style="height: 30px">
		    		<td>用户权限：
		    			<input class="easyui-combobox" id="showRole" name="language" style="width:60"
							data-options="
									url:'<%=basePath %>role/queryRoleList',
									method:'post',
									valueField:'roleId',
									textField:'roleName',
									panelHeight:'auto',
									editable:false">
					</td>
		    	</tr>
		   	</table>
		</div>
		<!-- 分配权限窗口 end -->
		<script>
		$(function(){
			/* 分页 */
			var pager = $('#dg').datagrid().datagrid('getPager');
			
		})
		// 重新载入当前页面数据
		function refresh(){
			$('#dg').datagrid('reload');    
		}
		//启用/删除formatter
		function isdelformatter(value,row,index){
			if(value=="1"){
				return '<span><a href="#" style="text-decoration:none;color:green" onclick=qidel('+row.id+','+value+'); >已 启 用</a></span>';
			}else if(value=="2"){
				return '<span><a href="#" style="text-decoration:none;color:red" onclick=qidel('+row.id+','+value+'); >已 禁 用</a></span>';
			}else{
				return value;
			}
		}
		function roleNameformatter(value,row,index){
			if(row.roleId==0){
				return '<span><a href="#" style="text-decoration:none;color:red">无权限</a></span>';
			}else{
				return value;
			}
		}
		//启用/删除
		function qidel(id,value){
			var isDel = "";
			var delName="";
			if(value=='1'){
				isDel='2';
				delName="禁用";
			}
			if(value=='2'){
				isDel='1';
				delName="启用";
			}
			  
			$.messager.confirm('确认','您确认想要 [ '+delName+' ] 数据吗？',function(r){    
			    if (r){    
			    	$.ajax({  
						url:'<%=basePath %>user/updateUser',
						type:'post',
						data:{
						"id":id,
						"isDel":isDel
						},
						dataType:'json',
						error:function(){
							$.messager.alert("提示",delName+"异常","error");
						}, 
						success:function(map){ 
							var row = map.row;
							if(row>=0){
								$.messager.alert("提示",delName+"成功","info");
								$('#dg').datagrid("reload");
								return;
							}else{
								$.messager.alert("提示",delName+"失败","error");
								return;
							}
						}  
					});    
			    }    
			});
		}
		/* 点击搜索时触发 */
		function init(){
			var delName ="查询用户";
			var userName = $("#userName").val().replace(/\s/g, "");//登录账户
			var showName = $("#showName").val().replace(/\s/g, "");//显示名字
			$('#dg').datagrid({
				url:'<%=basePath %>user/queryUser?dt='+new Date().getTime(),
				queryParams: {
					userName: userName,
					showName: showName
				}

			}); 
		}
		/* 点击重置时触发 */
		function chongzhi(){
			$('#userName').textbox('clear');
			$('#showName').textbox('clear');
		}
		/* 点击 新增用户时触发 */
		function addUser(){
			//先对表单进行清空
			$('#addForm').form('reset');
			$('#add').show();
				$('#add').dialog({
					title: '新增用户信息',
					width: 350,
					height: 250,
					closed: false,
					cache: false,
					modal: true,
					buttons:[{
						text:'保存',
						iconCls:'icon-ok',
						handler:function(){
						  	if($("#addForm").form('validate')){
						  		var userNameAdd = $("#userNameAdd").val().replace(/\s/g, "")
						  		if(userNameAdd==""){
						  			$.messager.alert("友情提示","登录账户不允许为空","error");
						  			return;
						  		}
						  		var pass = $("#userPassAdd").val().replace(/\s/g, "");
						  		if(pass.length<6){
						  			$.messager.alert("友情提示","密码长度最少6位","error");
						  			return;
						  		}
						  		
						  		var showNameAdd = $("#showNameAdd").val().replace(/\s/g, "")
						  		if(showNameAdd==""){
						  			$.messager.alert("友情提示","用户名称不允许为空","error");
						  			return;
						  		}
							  	$.ajax({  
									url:'<%=basePath %>user/insertUser',
									type:'post',
									data:$("#addForm").serialize(),
									dataType:'json',
									error:function(){
										$.messager.alert("友情提示","系统异常,请稍后尝试","error");
									}, 
									success:function(data){
										var row = data.row;
										var msg = data.msg;
										$.messager.alert("友情提示",msg,"info");
										if(row==1){
											$('#dg').datagrid("reload");
											$('#add').window('close');  // close a window  
										}
										
										
									}  
								});
						  	}
						    
						}
							
					},{
						text:'退出',
						iconCls:'icon-no',
						handler:function(){
							$('#add').dialog('close');
						}
					}]
				});
			}
		/* 点击分配权限出发 */
		function roleSelected(){
			var row = $('#dg').datagrid('getSelected');
			if(row==null || row==""){
				$.messager.alert("友情提示","请先选中一行数据","error");
				return;
			}
			  
			$("#userNameRole").html(row.userName);
			$("#showNameRole").html(row.showName);
			$("#showRole").combobox('setValue',row.roleId);
			if(row.roleId==0){
				$("#showRole").combobox('setValue','无权限');
			}
			$('#role').show();
				$('#role').dialog({
					title: '用户权限分配',
					width: 350,
					height: 250,
					closed: false,
					cache: false,
					modal: true,
					buttons:[{
						text:'保存',
						iconCls:'icon-ok',
						handler:function(){
							var roleId = $("#showRole").combobox('getValue');
							$.ajax({  
								url:'<%=basePath %>user/updateUser',
								type:'post',
								data:{
									'id':row.id,
									'roleId':roleId
								},
								dataType:'json',
								error:function(){
									$.messager.alert("友情提示","系统异常,请稍后尝试","error");
								}, 
								success:function(data){
									var row = data.row;
									var msg = data.msg;
									
									if(row>=0){
										$.messager.alert("友情提示","[权限分配成功!]","info");
										$('#role').dialog('close');
										$('#dg').datagrid("reload");
									}else{
										$.messager.alert("友情提示","[权限分配失败!]","info");
									}
									if(msg!=null && msg !='undefined'){
										$.messager.alert("友情提示",msg,"info");
										return;
									}
								}  
							});
						}
					},{
						text:'退出',
						iconCls:'icon-no',
						handler:function(){
							$('#role').dialog('close');
						}
					}]
				});
		}
	</script>
	
</body>
</html>